<template>
	<view class="home-page" :style="{'padding-top': paddingTop + 'px'}">
		<CustomHeader title="来人喽儿" />
		<div class="search">
			<!-- <div class="select-address"> -->
			<picker class="select-address" mode="region" @change="bindRegion" @cancel="cancelRegion">
				<span>{{regionName}}</span>
				<image src="@/static/select.png" mode=""></image>
			</picker>

			<!-- </div> -->
			<div class="search-input">
				<image @click="onSearch" src="../../static/search.png" mode=""></image>
				<input @confirm="onSearch" @keydown.enter="onSearch" v-model="searchValue" type="text"
					placeholder-class="search-input-placeholder" :placeholder="`搜索职位${userInfo.identity == 1 ? '、公司': ''}`" >
			</div>
		</div>

		<div class="filter-wrap">

			<!-- 经验列表 -->
			<picker @change="bindExp" :value="expIndex" range-key="name" :range="exps">
				<div class="filter-item">
					<span>{{exps[expIndex].name | handleName('经验',expIndex,exps[expIndex].name)}}</span>
					<image src="../../static/select.png" mode=""></image>
				</div>
			</picker>


			<picker @change="bindSalary" :value="salaryIndex" range-key="name" :range="salarys">
				<div class="filter-item">
					<span>{{salarys[salaryIndex].name | handleName('薪资', salaryIndex,salarys[salaryIndex].name)}}</span>
					<image src="../../static/select.png" mode=""></image>
				</div>
			</picker>

			<!-- 学历列表 -->
			<picker @change="bindEducate" :value="educatesIndex" range-key="name" :range="educates">
				<div class="filter-item">
					<span>{{educates[educatesIndex].name | handleName('学历', educatesIndex,educates[educatesIndex].name)}}</span>
					<image src="../../static/select.png" mode=""></image>
				</div>
			</picker>

			<!-- 牛人筛选 -->
			<template v-if="!handleIdentity">
				<!-- 职位列表 -->
				<picker @change="bindJobcate" :value="jobcateIndex" range-key="name" :range="jobcates">
					<div class="filter-item">
						<span>{{jobcates[jobcateIndex].name | handleName('职位', jobcateIndex,jobcates[jobcateIndex].name)}}</span>
						<image src="../../static/select.png" mode=""></image>
					</div>
				</picker>
			</template>
		</div>


		<scroll-view class="ad-show-scroll" v-if="handleIdentity" scroll-x="true">
			<div class="ad-show">
				<view class="ad-item" v-for="(item,index) in banners" :key="index">
					<image :src="item.cover" mode=""></image>
				</view>
			</div>
		</scroll-view>

		<div class="list-wrap">
			<!-- 牛人显示 -->
			<div class="title" v-if="handleIdentity">
				<h4>最新职位</h4>
				<!-- <navigator url="">查看更多</navigator> -->
			</div>
			<div class="list">
				<template v-if="handleIdentity">
					<div class="item" @click="() => onClickDetail(item,'1')" v-for="(item, index ) in list"
						:key="index">
						<div class="item-title">
							<div class="info">
								<image :src="item.company_header  || require('../../static/image/avatar.png')" mode="">
								</image>
								<span>{{item.company_name}}</span>
							</div>
							<div class="price">{{item.salary}}</div>
						</div>
						<div class="post">
							<span>{{item.name}}</span>
							<p><template v-if="item.show_rule.length > 0">
									{{item.show_rule[0].name}} {{item.show_rule[1] && item.show_rule[1].name || ''}}
								</template> </p>
						</div>
						<div class="bottom">
							<div class="labels">
								<div class="label" v-for="(label,key) in item.show_tag" :key="key">{{label.name}}</div>
							</div>
							<div class="address">{{item.company_city}}</div>
						</div>
					</div>
				</template>

				<template v-else>
					<div class="item" @click="() => onClickDetail(item,'2')" v-for="(item, index ) in list"
						:key="index">
						<div class="item-title">
							<div class="info">
								<image :src="item.header || require('../../static/image/avatar.png')" mode=""></image>
								<span>{{strictName(item.name)}}</span>
							</div>
							<div class="price">{{item.salary}}</div>
						</div>
						<div class="post">
							<span>{{item.current_job_name}}</span>
						</div>
						<div class="bottom" style="margin-top:20upx">
							<div class="labels">
								<div class="label" v-for="(label,key) in item.show_tag" :key="key" v-if="label.name">
									{{label.name}}
								</div>
							</div>
							<div class="address">{{item.company_city}}</div>
						</div>
					</div>
				</template>

			</div>
		</div>

		<Tabbar :activePath="strict" />
	</view>
</template>

<script>
	import Tabbar from '@/components/custom-tabbar.vue'
	import CustomHeader from '@/components/custom-header.vue'
	export default {
		components: {
			Tabbar,
			CustomHeader
		},
		data() {
			return {
				userInfo: null,

				page: 1,
				banners: [], // banner图
				// 学历
				educates: [{
					id: ''
				}],
				educatesIndex: 0,
				// 经验
				exps: [{
					id: ''
				}],
				expIndex: 0,
				// 薪资待遇列表
				salarys: [{
					id: ''
				}],
				salaryIndex: 0,
				// 职位
				jobcates: [{
					id: ''
				}],
				jobcateIndex: 0,

				list: [], // 首页列表

				regionList: [], // 地区
				regionIndex: 0,

				regionName: '全部',
				regionCode: '',


				searchValue: '', // 搜索关键词


				strict: 0, // 1 严选 0 首页
				isVip: false,
				
				paddingTop: 0,
			}
		},
		
		computed: {
			// 身份 true 牛人 false 企业
			handleIdentity() {
				return this.userInfo && this.userInfo.identity == 1
			},
			strictName() {
				return name => {
					let user = uni.getStorageSync('userInfo')
					if (this.strict == 1 && !this.isVip) {
						return name.slice(0, 1) + '**'
					} else {
						return name
					}
				}
			},
			// handleRegion() {
			// 	return this.regionList.length > 0 && this.regionList[this.regionIndex].name
			// }
		},
		filters: {
			handleName(e, name, index, selectName, ) {
				return index == 0 ? name : selectName
			},


		},
		onLoad({
			strict
		}) {
			// 严选
			if (strict) this.strict = strict

			this.userInfo = uni.getStorageSync('loginInfo')

			if (!this.userInfo) {
				uni.redirectTo({
					url: '/pages/login/index'
				})
			}
			this.userInfo.identity == 1 ? this.initIdentity() : this.initCompany()
			this.getSalary()
			this.getEducate()
			this.getExp()
			// this.getRegion()
			
			this.paddingTop = getApp().globalData.navHeight
			
		},
		created() {
			wx.hideHomeButton()
		
		},
		methods: {

			// 初始化牛人接口
			async initIdentity() {
				this.getBanner()
				this.getJob()
			},
			// 公司
			async initCompany() {
				this.getCattle()
				this.jobcate()
			},
			async getRegion() {
				const {
					data
				} = await this.$http.Recruit.getRegion()
				this.regionList = data
			},
			bindRegion(e) {
				// this.regionIndex = e.detail.value
				this.regionCode = e.detail.code[1]
				this.regionName = e.detail.value[1]
				this.initList()
				this.handleIdentity ? this.getJob() : this.getCattle()
			},
			cancelRegion() {
				this.regionCode = ''
				this.regionName = '全部'
				this.initList()
				this.handleIdentity ? this.getJob() : this.getCattle()
			},
			// 获取牛人列表
			async getCattle() {
				console.log(this.educates[this.educatesIndex])
				const {
					data,
					code
				} = await this.$http.Company.getCattle({
					page: this.page,
					name: this.searchValue,
					educate: this.educates[this.educatesIndex].id || '', // 学历
					exp: this.exps[this.expIndex].id || '', // 经验
					salary: this.salarys[this.salaryIndex].id, // 薪资
					current_job: this.jobcates[this.jobcateIndex].id, // 职位
					city_code: this.regionCode,
					strict: this.strict
				})
				if(code != 200) return false
				if (data.data.length > 0) this.page += 1
				this.list = [...this.list, ...data.data]
				this.isVip = data.is_vip
				uni.stopPullDownRefresh()
			},
			// 获取招聘列表
			async getJob() {
				// 获取招聘列表
				const {
					data
				} = await this.$http.Recruit.getJob({
					page: this.page,
					name: this.searchValue,
					city_code: this.regionCode,
					educate_level: this.educates[this.educatesIndex].id, // 学历
					exp: this.exps[this.expIndex].id, // 经验
					salary: this.salarys[this.salaryIndex].id // 薪资
				})
				if (data.data.length > 0) this.page += 1
				this.list = [...this.list, ...data.data]

				uni.stopPullDownRefresh()
			},
			// 搜索
			onSearch(e) {
				this.initList()
				this.handleIdentity ? this.getJob() : this.getCattle()
			},
			// 获取banner
			async getBanner() {
				const {
					data
				} = await this.$http.Recruit.getBanner()
				this.banners = data
			},
			// 获取学历
			async getEducate() {
				const {
					data
				} = await this.$http.Recruit.getEducate()
				this.educates = data.map(x => {
					if (x.id == 0) {
						x.id = ''
						x.name = '不限'
					}
					return x
				})
			},
			// 获取经验
			async getExp() {
				const {
					data
				} = await this.$http.Recruit.getExp()

				this.exps = data.map(x => {
					if (x.id == 0) {
						x.id = ''
						x.name = '不限'
					}
					return x
				})
			},
			// 获取薪资待遇列表
			async getSalary() {
				const {
					data
				} = await this.$http.Recruit.getSalary()
				data.unshift({
					id: '',
					name: '不限'
				})
				this.salarys = data
			},
			// 职位列表
			async jobcate() {
				const {
					data
				} = await this.$http.Recruit.jobcate()
				data.unshift({
					id: '',
					name: '不限'
				})
				this.jobcates = data
				console.log(this.jobcates)
			},
			// 选择职位
			bindJobcate(e) {
				this.jobcateIndex = e.detail.value
				this.initList()
				this.getCattle()
			},
			// 选择学历
			bindEducate(e) {
				console.log(e)
				this.educatesIndex = e.detail.value
				this.initList()
				this.handleIdentity ? this.getJob() : this.getCattle()
			},
			// 选择经验
			bindExp(e) {
				this.expIndex = e.detail.value
				this.initList()
				this.handleIdentity ? this.getJob() : this.getCattle()
			},
			// 选择薪资
			bindSalary(e) {
				this.salaryIndex = e.detail.value
				this.initList()
				this.handleIdentity ? this.getJob() : this.getCattle()
			},

			// 进入详情
			onClickDetail(item, type) {
				let id = type == '2' ? item.uid : item.id

				uni.navigateTo({
					url: `../index/${this.handleIdentity ? 'detail' : 'cattle'}?id=` + id + (this.strict ?
						`&strict=${this.strict}` : '')
				})
			},
			initList() {
				this.list = []
				this.page = 1
			}
		},
		onReachBottom(e) {
			console.log(this.handleIdentity)
			this.handleIdentity ? this.getJob() : this.getCattle()
		},
		onPullDownRefresh(e) {
			this.initList()
			this.handleIdentity ? this.getJob() : this.getCattle()
		}
	}
</script>

<style lang="less" scoped>
	.home-page {
		padding: 0 32upx;
		padding-bottom: calc(124upx + env(safe-area-inset-bottom));


		.search {
			display: flex;
			align-items: center;
			margin-top: 8upx;

			.select-address {
				display: flex;
				align-items: center;

				span {
					color: #666;
					font-size: 24upx;
					font-weight: 400;
				}

				image {
					width: 14upx;
					height: 8upx;
					margin-left: 8upx;
					position: relative;
					top: -6upx;
				}
			}

			.search-input {
				flex: 1;
				border: 1px solid #eee;
				border-radius: 8upx;
				padding-left: 20upx;
				display: flex;
				align-items: center;
				margin-left: 32upx;
				height: 72upx;

				image {
					width: 40upx;
					height: 40upx;
					margin-right: 16upx;
				}

				input {
					color: #666;
					font-size: 28upx;
					font-weight: 400;
				}

				.search-input-placeholder {
					color: #CCCCCC;
				}

			}
		}

		.filter-wrap {
			display: flex;
			align-items: center;
			margin-top: 20upx;

			.filter-item {
				background: #F2F2F2;
				margin-right: 20upx;
				height: 44upx;
				padding: 0 16upx;
				padding-right: 8upx;
				display: flex;
				align-items: center;
				border-radius: 4upx;
				min-width: 44upx;

				span {
					color: #666;
					font-size: 24upx;
					line-height: 24upx;
					font-weight: 400;
				}


				image {
					width: 14upx;
					height: 8upx;
					margin-left: 8upx;
				}
			}
		}

		.ad-show-scroll {
			height: 320upx;
			margin-top: 36upx;
			white-space: nowrap;
			width: 100%;
		}

		.ad-show {
			height: 320upx;


			.ad-item {
				width: 508upx;
				height: 320upx;
				margin-right: 32upx;
				display: inline-block;
				border-radius: 8upx;

				&:last-of-type {
					margin-right: 0;
				}

				image {
					width: 100%;
					height: 100%;
					border-radius: 8upx;
				}
			}
		}

		.list-wrap {
			margin-top: 32upx;

			.title {
				display: flex;
				align-items: center;

				h4 {
					flex: 1;
					color: #28211F;
					font-size: 28upx;
					font-weight: 600;
				}

				navigator {
					color: #2AABE2;
					font-size: 24upx;
					line-height: 24upx;
					font-weight: 400;
				}
			}

			.list {
				margin-top: 32upx;

				.item {
					padding: 32upx;
					padding-top: 34upx;

					background: #fff;
					box-shadow: 0px 3px 10px #F1F1F1;
					border-radius: 8upx;
					margin-bottom: 20upx;

					.item-title {
						display: flex;
						align-items: center;

						.info {
							display: flex;
							align-items: center;
							flex: 1;

							image {
								margin-right: 22upx;
								width: 40upx;
								height: 40upx;
								border-radius: 40upx;
							}

							span {
								color: #666E7A;
								font-size: 24upx;
								font-weight: 400;
							}
						}

						.price {
							color: #2AABE2;
							font-size: 28upx;
							font-weight: 600;
						}
					}

					.post {
						display: flex;
						flex-direction: column;

						span {
							margin-top: 24upx;
							font-size: 28upx;
							color: #28211F;
							font-weight: 600;
						}

						p {
							font-size: 24upx;
							color: #666E7A;
							font-weight: 400;
							margin-top: 20upx;
							min-height: 26upx;
						}
					}

					.bottom {
						display: flex;
						align-items: center;
						margin-top: 16upx;

						.labels {
							flex: 1;
							display: flex;
							align-items: center;

							.label {
								border-radius: 4upx;
								margin-right: 16upx;
								padding: 0 16upx;
								background: #F2F2F2;
								height: 44upx;
								line-height: 44upx;
								font-size: 24upx;
								color: #666;
								font-weight: 400;
							}
						}

						.address {
							color: #666E7A;
							font-size: 22upx;
							font-weight: 400;
						}
					}
				}
			}
		}
	}
</style>
